﻿@{
    Layout = null;
    List<ExChange.Model.Setting> setting = (List<ExChange.Model.Setting>)ViewBag.SettingList;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <title>@ViewBag.Title</title>
    <script src="~/Content/js/jquery-3.1.1.min.js"></script>
    <script src="~/Layer/layer.js"></script>
    <style>
        body,
        html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: \5FAE\8F6F\96C5\9ED1;
            background-color: @(setting.FirstOrDefault(x => x.Type == ((int)ExChange.Web.EnumHelper.UploadType.页面颜色)).Url);
        }

        .web-top-panel {
            width: 100%;
            height: 52%;
            background-image: url(@(setting.FirstOrDefault(x => x.Type == ((int)ExChange.Web.EnumHelper.UploadType.欢迎页欢迎图)).Url));
            background-size: 100% 100%;
        }

            .web-top-panel img {
                width: 60%;
                margin: 15px;
            }

        .web-content-panel {
            width: calc(100% - 60px);
            height: calc(48% - 20px);
            padding: 20px 30px 0;
        }
        .web_video{
            padding: 0;
            width:100%;
            height: 48%;
        }
        .web_video video{
            width:100%;
        }

        .content-title {
            font-size: 18px;
            display: block;
        }

        .content-text {
            display: block;
            font-size: 14px;
            margin-top: 10px;
            text-indent: 2em;
            line-height: 1.5em;
        }

        .content-foot {
            display: block;
            font-size: 14px;
            margin-top: 10px;
            text-align: right;
        }

        .content-btn {
            margin-top: 10px;
            display: block;
            text-align: center;
        }

            .content-btn img {
                width: 70%;
            }

        .web-content-panel div {
            margin-top: 0px;
            height: auto;
            text-align: center;
        }

            .web-content-panel div input {
                height: 40px;
            }

        .inputcontrol {
            border: 3px solid #fdb54a;
            box-shadow: 0px 0px 40px #da1d0f inset;
            background-color: #ff4811;
            border-radius: 23px;
            width: calc(96% - 26px);
            padding-left: 20px;
            outline: none;
            color: white;
    float:left;
            font-size: 14px;
        }

        #code {
            margin-top: 20px;
            border: 3px solid #fdb54a;
            border-right: 0;
            box-shadow: 0px 0px 40px #da1d0f inset;
            background-color: #ff4811;
            border-radius: 23px 0 0 23px;
            width: calc(48% - 23px);
            padding-left: 20px;
            outline: none;
            color: white;
            float: left;
            font-size: 14px;
        }

        #savebtn {
margin-top: 20px;
    border: 3px solid #fdb54a;
    border-left: 0;
    box-shadow: 0px 0px 40px #da1d0f inset;
    background-color: #c00914;
    border-radius: 0 23px 23px 0;
    width: calc(48% - 3px);
    float: left;
    outline: none;
    height: 42px;
    color: white;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    line-height: 39px;
        }

        @if ((bool)ViewBag.IsIos == true) {

        @(@"@media screen and (-webkit-min-device-pixel-ratio:0) {

   #savebtn {
    height: 47px;
    line-height: 44px;
        }")
}

        .indexcontent>* {
            line-height: 25px;
        }
        .indexcontent{
            text-align: inherit !important;    
         }
    </style>
</head>

<body>
    <div class="web-top-panel" style="height:40%">
        <img style="max-height: 100%;" src="@(setting.FirstOrDefault(x => x.Type == ((int)ExChange.Web.EnumHelper.UploadType.欢迎页Logo)).Url)">
    </div>
    @if (setting.FirstOrDefault(x => x.Type == ((int)ExChange.Web.EnumHelper.UploadType.欢迎内容类型)).Url == "text")
    {
        <div class="web-content-panel" id="content">
            <div class="indexcontent">
                <span class="content-title">@(setting.FirstOrDefault(x => x.Type == ((int)ExChange.Web.EnumHelper.UploadType.欢迎语标题)).Url)</span>
                @Html.Raw(setting.FirstOrDefault(x => x.Type == ((int)ExChange.Web.EnumHelper.UploadType.欢迎语内容)).Url)
                @Html.Raw(setting.FirstOrDefault(x => x.Type == ((int)ExChange.Web.EnumHelper.UploadType.欢迎语落款)).Url)
            </div>
            <a href="#" class="content-btn" onclick="$('#content').remove(); $('#login').show();" style=" position: fixed; bottom: 0; margin: auto; width: 100%; left: 0; ">
                <img style="width: 50%" src="@(setting.FirstOrDefault(x => x.Type == ((int)ExChange.Web.EnumHelper.UploadType.欢迎页按钮)).Url)" alt="" />
            </a>
        </div>
    }
    else
    {
        <div class="web-content-panel web_video" id="content_video">
            <video autoplay="autoplay" src="@(setting.FirstOrDefault(x=>x.Type==((int)ExChange.Web.EnumHelper.UploadType.欢迎视频)).Url)"></video>
            <a href="#" class="content-btn" onclick="$('#content_video').remove(); $('#login').show();" style=" position: fixed; bottom: 0; margin: auto; width: 100%; left: 0; ">
                <img style="width: 50%" src="@(setting.FirstOrDefault(x => x.Type == ((int)ExChange.Web.EnumHelper.UploadType.欢迎页按钮)).Url)" alt="" />
            </a>
        </div>
    }
    <div class="web-content-panel" id="loginpassword" style="display: none;">
        <div>
            <input type="text" class="inputcontrol" id="phone" value="输入手机号码" onfocus="if (this.value == '输入手机号码') this.value = ''" onblur="if (this.value == '') this.value = '输入手机号码'" />
        </div>
        <div>
            <input type="text" id="code" value="输入验证码" onfocus="if (this.value == '输入验证码') this.value = ''" onblur="if (this.value == '') this.value = '输入验证码'" />
            <a href="#" id="savebtn" onclick="getsmscode(@ViewBag.request)">获取验证码</a>
            @*<input type="button" id="savebtn" onclick="getsmscode()" value="获取验证码" />*@
        </div>
        <a href="#" class="content-btn" onclick="login(1)">
            <img src="/Content/images/btn_gjh.png" alt="" style="margin-top: 10px;" />
        </a>
        <a href="#" style="display: block; text-align: center;" onclick="$('#loginpassword,#login').toggle()">切换账号登录</a>
    </div>
    <div class="web-content-panel" id="login" style="display: none;">
        <div>
            <input type="text" class="inputcontrol" id="loginname" value="输入账号" onfocus="if (this.value == '输入账号') this.value = ''" onblur="if (this.value == '') this.value = '输入账号'" />
        </div>
        <div>
            <input type="password" class="inputcontrol" id="password"/>
        </div>
        <a href="#" class="content-btn" onclick="login(2)">
            <img src="/Content/images/btn_gjh.png" alt="" style="margin-top: 10px;"/>
        </a>
        <a href="#" style="display: block; text-align: center;" onclick="$('#loginpassword,#login').toggle()">切换手机验证码登录</a>
    </div>

    <script>
        function getsmscode(type) {
            if (type == 1) {
                layer.msg('仅为演示使用，请勿尝试提交！');
            } else {
                var phone = $("#phone").val();
                $.post("/WeChat/SendCodeAjax", { phone: phone }, function (data) {
                    var json = eval(data);
                    layer.msg(json.message);
                });
            }
        };
        function login(type) {
            if (type == 1) {
                var phone = $("#phone").val();
                var code = $("#code").val();
                if (!phone || phone == '输入手机号码') {
                    layer.msg('请输入手机号码');
                    return;
                }

                if (!code || code == '输入验证码') {
                    layer.msg("请输入验证码"); return;
                }
                $.post("/WeChat/LoginAjax", { phone: phone, code: code }, function (data) {
                    if (typeof (data) == "string") {
                        layer.msg(data);
                        return;
                    }
                    var json = eval(data);
                    if (json.status == 1) {
                        window.location = json.data;
                    } else {
                        layer.msg(json.message);
                    }
                });
            } else if (type == 2) {
                var loginname = $("#loginname").val();
                var password = $("#password").val();
                if (!loginname || loginname == '输入账号') {
                    layer.msg("请输入账号"); return;
                }

                if (!password) {
                    layer.msg("请输入登录密码"); return;
                }
                $.post("/WeChat/LoginAjax", { loginname: loginname, password: password }, function (data) {
                    if (typeof (data) == "string") {
                        layer.msg(data);
                        return;
                    }
                    var json = eval(data);
                    if (json.status == 1) {
                        window.location = json.data;
                    } else {
                        layer.msg(json.message);
                    }
                });
            }
        };
    </script>
</body>

</html>